<template>
  <div>
    <div id="readContract">
      <h4 class="table">
        农民工简易劳务合同
        <el-button class="saveBtn exportContract" @click="exportContract"
          >导出</el-button
        >
      </h4>
      <ul class="content">
        <li>
          <ul class="partyA">
            <li>
              甲方(用人单位)名称
              <span id="companyName">{{
                contractInfos.companyName || '--'
              }}</span>
            </li>
            <li>
              法定代表人
              <span id="companyCode">{{
                contractInfos.companyManager || '--'
              }}</span>
            </li>
            <li>
              单位住所
              <span id="companyAddress">{{
                contractInfos.regAreaName || '--'
              }}</span>
            </li>
            <li>
              通讯地址
              <span id="companyAddress">{{
                contractInfos.officeAddress || '--'
              }}</span>
            </li>
            <li>
              联系电话
              <span id="companyAddress">{{
                contractInfos.companyManagerTel || '--'
              }}</span>
            </li>
          </ul>
        </li>
        <li>
          <ul class="partyB">
            <li>
              乙方(劳动者)姓名
              <span id="employeeName">{{
                contractInfos.employeeName || '--'
              }}</span>
            </li>
            <li>
              身份证号码
              <span id="employeeIdcard">{{
                contractInfos.cardNo || '--'
              }}</span>
            </li>
            <li>
              家庭住址
              <span id="employeeIdcard">{{
                contractInfos.employeeAddress || '--'
              }}</span>
            </li>
            <li>
              通讯地址
              <span id="employeeBirthday">{{ '--' }}</span>
            </li>
            <li>
              联系电话
              <span id="employeeBirthday">{{
                contractInfos.employeeTel || '--'
              }}</span>
            </li>
          </ul>
        </li>
        <li>
          &nbsp;&nbsp;甲乙双方根据《中华人民共和国劳动合同法》及相关法律、法规规定，
          经平等协商一致，自愿签订本合同，共同遵守本合同所列条款。
        </li>
        <li>
          <p class="title">一 、劳动合同期限</p>
          <div>
            &nbsp;
            <p class="title elementStyle">第一条</p>
            &nbsp; 本合同是以完成一定工作任务为期限的劳动合同。
          </div>
          <div>
            &nbsp;本合同生效日期为
            <span id="employStartDate">{{
              contractInfos.beginTimeYear || '--'
            }}</span
            >年
            <span id="employEndDate">{{
              contractInfos.beginTimeMonth || '--'
            }}</span>
            月
            <span id="dates">{{ contractInfos.beginTimeDay || '--' }}</span>
            日；以乙方完成工作任务为合同终止时间。
          </div>
        </li>
        <li>
          <p class="title">二 、工作内容和工作地点</p>
          <ul>
            <li>
              <div>
                <p class="title elementStyle">第二条</p>
                &nbsp; 甲方招用乙方在
                <span>{{ contractInfos.projectName }}</span
                >（项目名称）工程<span>{{ contractInfos.workTypeName }}</span
                >岗位（工种）工作。 乙方的岗位（工种）上岗证号码为<span
                ></span>。
              </div>
            </li>
          </ul>
        </li>
        <li>
          <p class="title">三、劳动保护和劳动条件</p>
          <div>
            &nbsp;
            <p p class="title elementStyle">第三条</p>
            &nbsp;
            甲方应当在乙方进入施工现场当天对乙方进行入场三级安全教育，并组织对乙方学习成果的书面考试，甲方应将考试结果保存在施工现场备案，考试不合格的不得在现场施工。
            甲方应当对从事电气焊、土建、水电设备安装等特殊工种的乙方进行岗前培训，乙方取得相应的操作证书方可上岗。
          </div>
          <div>
            &nbsp;
            <p p class="title elementStyle">第四条</p>
            &nbsp;
            甲方根据施工岗位的需要，按照国家安全生产、劳动保护、卫生的有关规定为乙方配备必要的安全防护措施，发放必要的劳动保护用品。
          </div>
          <div>
            &nbsp;
            <p p class="title elementStyle">第五条</p>
            &nbsp;
            甲方应根据国家有关法律法规，建立安全生产制度。乙方应当严格遵守甲方的劳动安全制度，严禁违章作业，防止劳动过程中的事故，减少职业危害。
          </div>
        </li>
        <li>
          <p class="title">四、工资待遇</p>
          <div>
            &nbsp;
            <p p class="title elementStyle">第六条</p>
            &nbsp; 乙方工资按照以下第 <span></span> 种方式计算：
          </div>
          <ul>
            <li>
              &nbsp;1、计时工资，乙方工资为每月（日）工资
              <span>{{ contractInfos.singlePriceDay }}</span> 元。
            </li>
            <li>
              &nbsp;2、按工程量计付工资。
              <ul>
                <li>
                  （1）按工程量单价
                  <span>{{ contractInfos.singlePriceOther }}</span>
                  （如元/平方）计算工资；
                </li>
                <li>
                  （2）按工程量总价
                  <span></span>
                  %计算工资。双方约定的工程量单价不得低于安徽建设工程定额人工费标准。
                </li>
                <li>
                  &nbsp;实行按工程量计付工资的，每月支付工资额不低于当月实际完成工程量的
                  <span></span> %。
                </li>
              </ul>
            </li>
          </ul>
          <div>
            &nbsp;
            <p p class="title elementStyle">第七条</p>
            &nbsp; 甲方应在每月日前以货币形式支付乙方的工资，、
            并由乙方签字确认。甲方在劳动合同终止、解除后 30
            天内应当一次性付清乙方的工资。
          </div>
          <div>
            &nbsp;
            <p p class="title elementStyle">第八条</p>
            &nbsp; 甲乙双方对工资支付的其他约定：<span></span>。
          </div>
        </li>
        <li>
          <p class="title">五 、劳动纪律</p>
          <div>
            &nbsp;
            <p p class="title elementStyle">第九条</p>
            &nbsp;
            乙方应严格遵守甲方的各项规章制度、劳动纪律和安全技术操作规程。
          </div>
        </li>
        <li>
          <p class="title">六 、其他事项</p>
          <div>
            &nbsp;
            <p p class="title elementStyle">第十条</p>
            &nbsp;
            本合同未尽事宜按照《中华人民共和国劳动合同法》、《中华人民共和国劳动合同法实施条例》等有关法律、法规执行。
          </div>
          <div>
            &nbsp;
            <p p class="title elementStyle">第十一条</p>
            &nbsp; 本合同一式两份，甲乙双方各执一份，自双方签字盖章之日起生效。
          </div>
        </li>
        <li class="clearfix singleBox">
          <div class="fl">
            <P>
              甲方(公 章)：
              <span></span>
            </P>
            <p style="margin-top: 40px">
              签订日期：
              <span>{{ contractInfos.agreeDateYear || '--' }}</span> 年
              <span>{{ contractInfos.agreeDateMonth || '--' }}</span> 月
              <span>{{ contractInfos.agreeDateDay || '--' }}</span> 日
            </p>
          </div>
          <div class="fr pic">
            <P
              >乙方(签字)：
              <span>{{ contractInfos.employeeName || '--' }}</span></P
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  name: 'CZemployeeContract',
  props: {
    contractInfos: {
      type: Object,
    },
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    exportContract() {
      this.$emit('exportContract', '')
    },
  },
}
</script>
<style lang="less" scoped>
//在线合同
#readContract h4 {
  text-align: center;
}
#readContract ul li {
  list-style: none;
}
.content {
  padding: 5px 35px;
}
.content li {
  margin-bottom: 20px;
  text-align: left;
}
.content li ul li {
  margin-bottom: 0px;
  padding-left: 20px;
}
#readContract .content .partyA {
  margin-top: 20px;
}

#readContract .content .partyA li,
#readContract .content .partyB li {
  padding-left: 0px;
}
#readContract .content .partyA #companyName {
  display: inline-block;
  padding: 0px;
  min-width: 235px;
}
#readContract .content .partyA #companyCode {
  display: inline-block;
  padding: 0px;
  width: 243px;
}
#readContract .content .partyA #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 272px;
}
#readContract .content .partyB#companyCode {
  display: inline-block;
  padding: 0px;
  width: 239px;
}
#readContract .content .partyB #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 263px;
}
#readContract .content .partyB #employeeName {
  display: inline-block;
  padding: 0px;
  width: 248px;
}
#readContract .content .partyB #employeeBirthday {
  display: inline-block;
  padding: 0px;
  width: 299px;
}
#readContract .content .partyB #employeeIdcard {
  display: inline-block;
  width: 285px;
  padding: 0px;
}
.content li div {
  padding-left: 20px;
}
.content li span {
  text-align: center;
  padding: 0px 15px;
  border-bottom: 1px solid black;
}
.content li .title {
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 700;
}
.content li div input {
  height: 18px;
  width: 18px;
  vertical-align: bottom;
  margin-right: 10px;
  opacity: 1;
  position: static;
  margin-left: 50px;
}
.content li div label:nth-child(2) {
  margin-left: 50px;
}
#readContractWin + .dialog-button > a {
  opacity: 0;
}

.exportContract {
  float: right;
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}
.imgCss {
  width: 100px;
  margin-right: 50px;
}
.attendanceDialog .el-form--inline .el-form-item {
  margin-right: 0px;
}

.pic img {
  vertical-align: top;
  width: 40%;
}

.singleBox div {
  widows: 50%;
}
/deep/ .dialogTable img {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}
.elementStyle {
  display: inline-block;
}
.content li {
  line-height: 21px;
}
</style>
